<template>
	<view>
		<view class="order-list">
			<view class="kuang address-container">
				<image src="../../static/images/order-dizhi.png" class="border-left"></image>
				<view  class="username">{{info.linkman}}<text>{{info.phone}}</text></view>
				<view class="useraddress">{{info.address}}</view>
			</view>
			<view class="kuang">
				<view class="uni-row good-item border-bottom" v-for="(item,index) in info.cartList" :key="index" @tap="gogoods" :data-id= "item.spu_id">
					<view class="order-icon">
						<image :src="item.img"></image>
					</view>
					<view class="order-info">
						<view class="good-name">
							{{item.name}}
						</view>
						<view class="price">
							<text style="font-size: 18rpx;">
								￥
							</text>
							<text>
								{{item.true_price}}
							</text>
							<text style="float: right;">
								×{{item.count}}
							</text>
						</view>
					</view>
				</view>
				
				<view class="heji-price border-bottom" v-if="info.delivery_way==1">
					<text class="order-left">配送方式</text>
				    紧急配送
				</view>
				<view class="heji-price border-bottom">
					<text class="order-left">配送费</text>
				   ￥{{info.fee}}
				</view>
				<view class="heji-price border-bottom" v-if="info.pay_way==1">
					<text class="order-left">付款方式</text>
				    立即付款
				</view>
				<view class="heji-price border-bottom" v-if="info.pay_way==2">
					<text class="order-left">付款方式</text>
				    货到付款
				</view>
				
				<view class="heji-price border-bottom" v-if="info.is_coupons==1">
					<text class="order-left">优惠券</text>
					<text style="color: #38D180;">{{info.coupons_price}}元优惠券</text>

				</view>
				<view class="heji-price border-bottom" v-if="role=='p'&&info.delivery_way==1">
					<text class="order-left">预计到达时间</text>
					<text >30分钟送达</text>
				</view>
				<view class="heji-price border-bottom" v-if="role=='s'&&info.delivery_way==1">
					<text class="order-left">预计到达时间</text>
					<text >12小时内送达</text>
				</view>
				<view class="heji-price border-bottom" v-if="info.delivery_way==2"> 
					<text class="order-left">预计到达时间</text>
					<text >24小时内送达</text>
				</view>
				<view class="beizhu" v-if="info.remark!=''&&info.remark!=null">
					<view>
						备注：
					</view>
					<view >
						{{info.remark}}
					</view>
				</view>
				<view class="heji-price ">
				   合计
					<text style="color: #38D180;">￥{{info.spu_totals}}</text>
				</view>	
				<view class="heji-price " v-if="info.order_status!=0&&info.order_status!=3">
				    实付
					<text style="color: #38D180;">￥{{info.totals}}</text>
				</view>	
				<view class="heji-price " v-if="info.order_status==0||info.order_status==3">
				    应付
					<text style="color: #38D180;">￥{{info.totals}}</text>
				</view>
				<!-- <view class="btn-list">
					<button>联系客服</button>
					
				</view> -->
			</view>
            <view class="kuang">
				<view class="heji-price border-bottom">
					<text class="order-left">订单编号</text>
				   {{info.order_number}}
				</view>
				<view class="heji-price border-bottom" >
					<text class="order-left">创建时间</text>
				   {{info.create_time}}
				</view>
				<view class="heji-price border-bottom" v-if="info.order_status!=0&&info.order_status!=3&&info.order_status!=6">
					<text class="order-left">付款时间</text>
				   {{info.buy_time}}
				</view>
				<view class="heji-price " v-if="info.order_status>=2&&info.order_status!=3&&info.pay_way!=2&&info.order_status!=6">
					<text class="order-left">发货时间</text>
				   {{info.express_time}}
				</view>
				<view class="heji-price " v-if="info.order_status==4&&info.order_status!=6">
					<text class="order-left">收货时间</text>
				   {{info.express_ok_time}}
				</view>
			</view>
		</view>
		<view class="bottom btn-list" style="box-sizing: border-box; padding-right: 32rpx;">
			<button class="fukuan" v-if="info.order_status==0||info.order_status==3" @tap="payone()">立即付款</button>
			<button class="fukuan" v-if="info.order_status==4" @tap="gopingjia()">评价订单</button>
			<button class="fukuan" v-if="info.order_status==2" @tap="affirm()">确认收货</button>
			<button v-if="info.order_status==0" @tap="off()">取消订单</button>
			<button  open-type="contact" >在线客服</button>
			<button v-if="item.order_status==6">已取消</button>
			<button v-if="item.order_status==5">已评价</button>
			<button v-if="item.order_status==5||item.order_status==6" @tap="del_order()" >删除</button>
			
		</view>
		<view style="height: 87rpx;"></view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import { getlogin } from '@/static/js/login.js';
	import { isshangjia } from '@/static/js/login.js';
	export default {
		data() {
			return {
				tab_index:0,
				oreder_id:"",
				wxinfo_id:"",
				userinfo:{},
				role:"p",
				info:{},
				istijiao:false,
			}
		},
		onLoad(option){
			this.userinfo = getlogin();
			this.role = isshangjia();
			this.wxinfo_id = this.userinfo.wxinfo_id;		
			if(option.id){
				this.oreder_id=option.id;
			}
			this.getdata();
		},
		methods: {
			/**
			 * 付单个商品
			 */
			payone(){
				let $this = this;
				if(this.istijiao){
					return false;
				}
				uni.request({
					// url: httpPath.filePath+'/index/orderlist/pay',
					url: httpPath.filePath+'/wxPay.php/pay',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {wxinfo_id:this.wxinfo_id,openid:this.userinfo.openid,order_number:this.info.order_number,total_fee:this.info.totals},
					success: (res) => { 
						this.istijiao=true;
						// if(res.data.code==200){
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: res.data.timeStamp,
							    nonceStr: res.data.nonceStr,
							    package: res.data.package,
							    signType: res.data.signType,
							    paySign: res.data.paySign,
							    success: function (res) {
									$this.istijiao=false;
							        uni.showModal({
							        	showCancel:false,
							        	content:"支付成功"
							        })
									if(uni.getStorageSync('sole')){
										uni.removeStorage({
										    key: 'sole',
										    success: function (res) {
										        console.log('success');
										    }
										});
									}
							    },
							    fail: function (err) {
									$this.istijiao=false;
							        uni.showModal({
							        	showCancel:false,
							        	content:"支付失败"
							        })
							    }
							});
						// }
					}
				});
			},
			phone(phone){
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			/**
			 *删除订单
			 */
			del_order(){
				
				uni.request({
					url: httpPath.filePath+'/index/orderform/delete',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:this.oreder_id},
					success: (res) => {
						if(res.data.code==200){
							uni.showModal({
								showCancel:false,
								content:"删除成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},/**
			 *取消订单
			 */
			off(){
				// let id=e.currentTarget.dataset.id
				uni.request({
					url: httpPath.filePath+'/index/orderform/off',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:this.oreder_id},
					success: (res) => {
						if(res.data.code==200){
							uni.showModal({
								showCancel:false,
								content:"取消成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},/**
			 * 确认收货
			 */
			affirm(){
				
				uni.request({
					url: httpPath.filePath+'/index/orderform/affirm',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:this.oreder_id},
					success: (res) => {
						if(res.data.code==200){
							uni.showModal({
								showCancel:false,
								content:"确认成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},
			/**
			 * 去评价
			 */
			gopingjia(){
				uni.navigateTo({
					url:"pingjia?id="+this.oreder_id
				})
			},
			/**
			 * 前往商品详情页面
			 */
			gogoods(e){
				uni.navigateTo({
					url:"../shopping/goodsinfo?id="+e.currentTarget.dataset.id
				})
			},
			/**
			 * 获取订单详情
			 */
			getdata(){
				uni.request({
					url: httpPath.filePath+'/index/orderform/detail',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:this.oreder_id},
					success: (res) => {
						if(res.data.code==200){
							this.info= res.data.data;
						}
					}
				});
			},
			changetab(index){
				this.tab_index=index;
			},gopingjia(){
				uni.navigateTo({
					url:"pingjia"
				})
			}
		}
	}
</script>

<style>
	page{background: #f9f9f9;}
	.beizhu{overflow: hidden;}
	.beizhu view{float: left;font-size: 28rpx;}
	.beizhu view:nth-of-type(1){width: 25%;height: 86rpx;color: #999999;line-height: 86rpx;}
	.beizhu view:nth-of-type(2){width:75%;padding: 25rpx 0px;}
	.address-container{position: relative;overflow: hidden;}
	.username{font-size: 30rpx;color: #333333;}
	.useraddress{font-size: 28rpx;color: #333333;line-height: 50rpx;}
	.username text{font-size: 28rpx;color: #666666;margin-left: 20rpx;}
	.border-left{position: absolute;left: 0px;top: 0px;width: 9rpx;height: 200rpx;}
	.order-left{float: left;color: #999999;}
    .order-top{width: 100%;background: #333333;height:85rpx;}
	.tab-item{width: 20%;position: relative;font-size: 30rpx;color: #666666;text-align: center;height:85rpx;line-height: 85rpx;}
	.tab-active{color: #FFFFFF;font-weight: bold;}
	.tab-active::after{content: "";display: block;width: 98rpx;height: 2px;position: absolute;bottom: 0rpx;left: 28rpx;background: #7ADBA8;}
	.order-num{height: 60rpx;line-height: 60rpx;font-size: 28rpx;}
	.good-item{padding: 20rpx 0px;}
	.order-icon{width:142rpx ;height:142rpx ;border-radius: 5px;border: 1px solid #F2F2F2;margin-right: 24rpx;}
	.order-icon image{width: 100%;height: 100%;border-radius: 5px;}
	.order-info{width:430rpx;}
	.good-name{
	    height: 75rpx;font-size: 28rpx;color: #333;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical; 
	    -webkit-line-clamp: 2; 
	    line-height: 38rpx;
	}
	.order-list{margin-top: 30rpx;}
	.price{font-size: 28rpx;margin-top: 25rpx;}
	.heji-price{font-size: 28rpx;text-align: right;line-height: 86rpx;}
	.btn-list::after{content: "";display: block;clear: both;}
	.btn-list button::after{border: none;}
	.btn-list button{width: 144rpx;color: #38D180;border-radius: 5px;border: 1px solid #38D180;background: #FFFFFF;font-size: 28rpx;padding: 0px;margin-top: 15rpx;float: right;margin-left: 20rpx;height: 63rpx;line-height: 63rpx;}
    .fukuan{color: #FFFFFF!important;background:linear-gradient(-45deg,rgba(56,209,128,0.96),rgba(154,255,221,0.96))!important;border: none!important;}
    .order-num image{width: 36rpx;height: 36rpx;margin-right: 20rpx;vertical-align: middle;}
	.bottom{position: fixed;bottom: 0px;left: 0px;width: 100%;height: 90rpx;background: #FFFFFF;border-top: 1px solid #F2F2F2;}
	.bottom-view{padding-left: 50rpx;width: 100%;height: 90rpx;line-height: 90rpx;font-weight:500;color:rgba(102,102,102,1);font-size: 28rpx;box-sizing: border-box;}
	.bottom-view .select{left: 32rpx;top: 33rpx;}
	.jiesuan-container{width: 60%;float: right;padding-right: 32rpx;height: 90rpx;}
	.jiesuan{width: 150rpx;height: 60rpx;border-radius: 30rpx;margin-top:15rpx ;
	float: right;font-size: ;color: #FFFFFF;line-height: 60rpx;text-align: center;
	background:linear-gradient(-45deg,rgba(56,209,128,0.96),rgba(154,255,221,0.96));
	}
	.heji{text-align: right;padding-right: 10rpx;float: right;}
	.select{width:36rpx ;height: 36rpx;}
</style>
